<style type="text/css">
* {
    margin: 0;
    padding: 0;
	/* CSS3盒子模型 */
	/* 可以不用考虑padding和border是否会撑大盒子的情况了*/
    box-sizing: border-box;
}
.hero-header{
	padding-right: 20px;
	padding-right: 20px;
	background-color: rgba(239, 239, 239, 0.852);
}
.header-logo{
	width: 75px;
	height:  100%;
	float: left;
	margin-right: 10px;
}
.hy-navi {
	background-color: rgb(28, 79, 156);
	/*background-color: #e60012;*/
	min-width: 1280px;
	white-space: normal;
	font-family: 'Microsoft YaHei';
	text-align: right;
	/* height: 100px; */
}
.navi-banner {
	display: inline-block;
	margin: 0 auto;
}
/* -- */
.navBanner:after {
	content: "";
	display: inline-block;
	clear: both;
	visibility: hidden;
}
.navitem {
	float: left;
	font-size: 20px;
	padding: 10px 23px;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	transition: all 0.3s linear;
}
.navitem:hover {
	background-color: #3172d4;
	/*background-color: rgb(169, 22, 66);*/
}
.navitem:nth-child(1) {
	margin-left: -20px;
}
/* 导航栏 */
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item {
  color: #475669;
  opacity: 0.75;
  /* line-height: 400px; */
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* content-card */
.section {
	font-family: 'Microsoft YaHei';
	box-sizing: border-box;
	width: 1280px;
	padding-bottom: 50px;
	margin: 0 auto;
}

.sectionItemarea:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
}

.sectionTop {
	padding: 30px 0px 30px 0px;
	box-sizing: border-box;
}

.sectionTop:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
}

.sectionTitle {
	user-select: none;
	font-weight: 400;
	font-size: 36px;
	color: #333333;
	float: left;
}
.sectionItem {
	overflow: hidden;
	border-radius: 4px;
	box-sizing: border-box;
	float: left;
	margin: 0 20px 20px 0;
	width: 400px;
	height: 230px;
	color: #555555;
	background-color: rgba(248, 246, 246, 0.768);
	cursor: pointer;
	font-weight: 400;
	padding: 20px 0 20px 20px;
	transition: all 0.3s linear;
}
.sectionItem:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
}

.sectionItemimg {
	float: left;
	margin-right: 10px;
}

.sectionItemright {
	float: left;
	padding-top: 9px;
	box-sizing: border-box;
	color: #000000;
}
.sectionItem:hover {
	border-radius: 4px;
	background-color: white;
	box-shadow: 0px 6px 16px 0px rgb(217, 217, 217);
}

.sectionItemtitle {
	font-size: 22px;
	font-weight: 600;
}

.sectionItemtext {
	font-size: 14px;
	box-sizing: border-box;
	padding-bottom: 11px;
}

.sectionItemtext {
	color: #68707b;
}

.sectionItemtext>span:hover {
	color: #3269CA;
}
.sectionItemarea:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
}
</style>
<template>
  <div :class="{ 'large-font': isLargeFont }">
	<!-- banner -->
	<div class="">
	    <div class="">
			<div class="">
				<div class="block text-center" style="height: 460px;">
					<el-carousel  style="height: 460px;">
					<el-carousel-item v-for="item in imgItem" :key="item" style="height: 460px;">
						<img style="height: 460px; width: 100%;" :src="item.imageUrl" alt="">
					</el-carousel-item>
					</el-carousel>
				</div>
			</div>
	    </div>
  		  <!-- Add Scrollbar -->
  	 	 <div class="swiper-scrollbar"></div>
	</div>
	<!-- content -->
	<!-- <h3 style="line-height: 100px; font-size: 42px; margin-left: 50px;">主题服务</h3> -->
	<div class="section">
   	<div class="sectionTop">
    	<p class="sectionTitle">主题服务</p>
   	</div>
	<!-- <p style="line-height: 100px; font-size: 42px; margin-left: 50px;">主题服务</p> -->
	<div class="sectionItemarea">
		<div class="sectionItem">
    	 <div class="sectionItemimg">
    	  <img src="/src/pages/index/static/icon-card.png">
    	 </div>
    	 <div class="sectionItemright">
    	  <p class="sectionItemtitle">关系转移</p>
    	  <img style="margin: 12px 0 24px 0;" src="/src/pages/index/static/point-card.png">
    	  <p class="sectionItemtext"><span onclick="">企业职工养老保险关系转移申请</span></p>
    	  <p class="sectionItemtext"><span onclick="">城乡居民养老保险转移申请</span></p>
    	  <p class="sectionItemtext"><span onclick="">机关事业单位养老保险转移申请</span></p>
    	  <p class="sectionItemtext"><span onclick="">失业保险关系转移申请（试运行）</span></p>
    	 </div>
    	</div>
		<div class="sectionItem">
    	 <div class="sectionItemimg">
    	  <img src="/src/pages/index/static/icon-card.png">
    	 </div>
    	 <div class="sectionItemright">
    	  <p class="sectionItemtitle">保险查询</p>
    	  <img style="margin: 12px 0 24px 0;" src="/src/pages/index/static/point-card.png">
    	  <p class="sectionItemtext"><span onclick="">企业职工养老保险关系转移信息查询</span></p>
    	  <p class="sectionItemtext"><span onclick="">城乡居民养老保险转移信息查询</span></p>
    	  <p class="sectionItemtext"><span onclick="">机关事业单位养老保险转移申请信息查询</span></p>
    	  <p class="sectionItemtext"><span onclick="">失业保险关系转移申请查询（试运行）</span></p>
    	 </div>
    	</div>
		<div class="sectionItem">
    	 <div class="sectionItemimg">
    	  <img src="/src/pages/index/static/icon-card.png">
    	 </div>
    	 <div class="sectionItemright">
    	  <p class="sectionItemtitle">保险信息转移</p>
    	  <img style="margin: 12px 0 24px 0;" src="/src/pages/index/static/point-card.png">
    	  <p class="sectionItemtext"><span onclick="">企业职工养老保险关系转移申请</span></p>
    	  <p class="sectionItemtext"><span onclick="">城乡居民养老保险转移申请</span></p>
    	  <p class="sectionItemtext"><span onclick="">机关事业单位养老保险转移申请</span></p>
    	  <p class="sectionItemtext"><span onclick="">失业保险关系转移申请（试运行）</span></p>
    	 </div>
    	</div>
		<div class="sectionItem">
    	 <div class="sectionItemimg">
    	  <img src="/src/pages/index/static/icon-card.png">
    	 </div>
    	 <div class="sectionItemright">
    	  <p class="sectionItemtitle">公司保险</p>
    	  <img style="margin: 12px 0 24px 0;" src="/src/pages/index/static/point-card.png">
    	  <p class="sectionItemtext"><span onclick="">企业职工养老保险关系详情</span></p>
    	  <p class="sectionItemtext"><span onclick="">企业职工养老保险代缴</span></p>
    	  <p class="sectionItemtext"><span onclick="">企业职工养老保险管理</span></p>
    	  <p class="sectionItemtext"><span onclick="">企业职工养老保险充值</span></p>
    	 </div>
    	</div>
		<div class="sectionItem">
    	 <div class="sectionItemimg">
    	  <img src="/src/pages/index/static/icon-card.png">
    	 </div>
    	 <div class="sectionItemright">
    	  <p class="sectionItemtitle">我的保险</p>
    	  <img style="margin: 12px 0 24px 0;" src="/src/pages/index/static/point-card.png">
    	  <p class="sectionItemtext"><span onclick="">我的养老金详情</span></p>
    	  <p class="sectionItemtext"><span onclick="">我的保险信息详情</span></p>
    	  <p class="sectionItemtext"><span onclick="">缴纳保险</span></p>
    	  <p class="sectionItemtext"><span onclick="">保险关系转移</span></p>
    	 </div>
    	</div>
		<div class="sectionItem">
    	 <div class="sectionItemimg">
    	  <img src="/src/pages/index/static/icon-card.png">
    	 </div>
    	 <div class="sectionItemright">
    	  <p class="sectionItemtitle">养老保险</p>
    	  <img style="margin: 12px 0 24px 0;" src="/src/pages/index/static/point-card.png">
    	  <p class="sectionItemtext"><span onclick="">企业职工养老保险信息</span></p>
    	  <p class="sectionItemtext"><span onclick="">城乡居民养老保险信息</span></p>
    	  <p class="sectionItemtext"><span onclick="">机关事业单位养老保险信息</span></p>
    	  <p class="sectionItemtext"><span onclick="">失业保险关系转移信息（试运行）</span></p>
    	 </div>
    	</div>


	</div>
	</div>
 	 </div>
</template>


<script setup>
import { ref } from 'vue';
import myAxios from '../../plugins/myAxios.js';
import { useRoute,useRouter } from 'vue-router';
import fontSizeStore from '../../common/fontSizeStore.js';
import { loadStyleSheet } from '../../common/styles/styleLoader.js';

const router = useRouter();

// 使用全局字体大小状态
const { isLargeFont } = fontSizeStore.useFontSize();

const imgItem = [{
	img: '1.jpg',
  imageUrl: '/src/pages/index/static/1.png'
    // imageUrl: '/static/1-Cdew6s1K.png'
},
{
	img: '2.jpg',
  imageUrl: '/src/pages/index/static/2.png'
    // imageUrl: '/static/2.png'
},
{
	img: '3.jpg',
  imageUrl: '/src/pages/index/static/3.png'
    // imageUrl: '/static/3.png'
},
{
	img: '4.jpg',
  imageUrl: '/src/pages/index/static/4.jpg'
    // imageUrl: '/static/4.jpg'
},
// {
// 	img: '5.jpg',
//     imageUrl: '/src/pages/index/static/5.jpg'
// },
// {
// 	img: '6.jpg',
//     imageUrl: '/src/pages/index/static/6.png'
// }
]

const toLogin  = () => {
	router.push('/user/login')
}
</script>

